<template>
  <div>
    <fullCalendar
      :events="datas"
      ref="msg"
      v-bind="{typesof:type}"
      first-day="1"
      locale="zh-cn"
      @changeMonth="Monthclick"
      @eventClick="calendarclick"
      @dayClick="daysclick"
      @moreClick="moresClick"
    >
      <template slot="fc-event-card" slot-scope="p">
        <p class="pdd" v-show="type==1||type==2">{{p.event.schooltime}}</p>
        <p class="paragraph pdd">{{ p.event.title }}</p>
        <p class="pdd" v-show="type==1||type==2">{{ p.event.classban }}</p>
        <span v-show="type==2" v-for="(v,k) in p.event.data" :key="k">{{k+':'+ v}}&nbsp;&nbsp;</span>
      </template>
    </fullCalendar>
  </div>
</template>
<script>
import fullCalendar from "./fullCalendar.vue";

export default {
  props: {
    calendarclick: {
      type: Function,
      default: () => {}
    },
    Monthclick: {
      type: Function,
      default: () => {}
    },
    daysclick: {
      type: Function,
      default: () => {}
    },
    moresClick: {
      type: Function,
      default: () => {}
    },
    datas: {
      // events will be displayed on calendar//活动将显示在日历上
      type: Array
    },
    typede: {
      type: Number
    },
    // timek: {
    //   type: Number
    // }
  },
  watch: {
    typede(v) {
      this.xuan(v);
    }
  },
  data() {
    return {
      name: "Sunny!",
      type: this.typede
    };
  },
  methods: {
    timek(v) {
      this.$refs.msg.time(v);
    },
    xuan(v) {
      if (v == 0 || v == 1 || v == 2) {
        this.type = v;
      } else {
        return;
      }
    },
    timestampToTime(row) {
      var date = new Date(row); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    }
  },
  components: {
    fullCalendar
  }
};
</script>
<style lang='scss' scoped>
.paragraph {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.pdd{
  margin-bottom: 0px;
  margin-top: 0px;
}
</style>